{% extends "profile/base.html" %}

{% block title %}403 - 访问被拒绝{% endblock %}

{% block extra_css %}
<style>
    .error-container {
        text-align: center;
        padding: 80px 20px;
    }
    
    .error-code {
        font-size: 120px;
        font-weight: bold;
        color: #fd7e14;
        line-height: 1;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }
    
    .error-message {
        font-size: 24px;
        margin-bottom: 30px;
        color: #495057;
    }
    
    .error-description {
        font-size: 16px;
        color: #6c757d;
        margin-bottom: 40px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .error-actions {
        margin-top: 40px;
    }
    
    .error-icon {
        font-size: 64px;
        color: #fd7e14;
        margin-bottom: 20px;
    }
    
    .error-card {
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        padding: 40px;
        max-width: 800px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    
    .error-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg, #fd7e14, #e8590c);
    }
    
    .error-illustration {
        margin-bottom: 30px;
    }
    
    .btn-home {
        background: linear-gradient(45deg, #4361ee, #3f37c9);
        border: none;
        padding: 12px 30px;
        font-weight: 500;
        border-radius: 50px;
        transition: all 0.3s;
    }
    
    .btn-home:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 14px rgba(67, 97, 238, 0.3);
    }
    
    .btn-login {
        background-color: #fd7e14;
        color: white;
        border: none;
        padding: 12px 30px;
        font-weight: 500;
        border-radius: 50px;
        transition: all 0.3s;
    }
    
    .btn-login:hover {
        background-color: #e8590c;
        transform: translateY(-2px);
        box-shadow: 0 7px 14px rgba(253, 126, 20, 0.3);
    }
    
    .permission-info {
        background-color: #fff3cd;
        border-radius: 8px;
        padding: 15px;
        margin: 20px 0;
        text-align: left;
        border-left: 4px solid #fd7e14;
    }
    
    .lock-animation {
        display: inline-block;
        position: relative;
        margin-bottom: 20px;
    }
    
    .lock-animation i {
        font-size: 64px;
        color: #fd7e14;
        animation: shake 2s infinite;
    }
    
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
        20%, 40%, 60%, 80% { transform: translateX(5px); }
    }
    
    @media (max-width: 768px) {
        .error-code {
            font-size: 80px;
        }
        
        .error-message {
            font-size: 20px;
        }
        
        .error-card {
            padding: 30px 20px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="error-container">
    <div class="error-card">
        <div class="error-illustration">
            <div class="lock-animation">
                <i class="fas fa-lock"></i>
            </div>
        </div>
        
        <div class="error-code">403</div>
        <h1 class="error-message">访问被拒绝</h1>
        <p class="error-description">
            抱歉，您没有权限访问此页面。这可能是因为您未登录、账户权限不足，或者该页面需要特殊权限。
        </p>
        
        <div class="permission-info">
            <h5><i class="fas fa-info-circle me-2"></i>访问权限说明</h5>
            <ul class="mb-0">
                <li>某些页面需要登录后才能访问</li>
                <li>部分功能需要特定用户角色或权限</li>
                <li>资源可能设置为私有，仅所有者可访问</li>
            </ul>
        </div>
        
        <div class="error-actions">
            {% if current_user and current_user.is_authenticated %}
            <a href="{{ url_for('profile.dashboard') }}" class="btn btn-primary btn-home me-2">
                <i class="fas fa-home me-2"></i>返回首页
            </a>
            <a href="{{ url_for('profile.view_profile', user_id=current_user.id) }}" class="btn btn-outline-secondary">
                <i class="fas fa-user me-2"></i>我的资料
            </a>
            {% else %}
            <a href="{{ url_for('profile.login') }}" class="btn btn-warning btn-login me-2">
                <i class="fas fa-sign-in-alt me-2"></i>登录账户
            </a>
            <a href="{{ url_for('profile.register') }}" class="btn btn-outline-primary">
                <i class="fas fa-user-plus me-2"></i>注册账户
            </a>
            {% endif %}
        </div>
        
        <div class="mt-5">
            <h5>您可以尝试：</h5>
            <div class="row mt-3">
                <div class="col-md-4 mb-3">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-sign-in-alt fa-3x text-warning mb-3"></i>
                            <h6 class="card-title">登录账户</h6>
                            {% if current_user and current_user.is_authenticated %}
                            <p class="small text-muted">您已登录，但可能需要更高权限</p>
                            {% else %}
                            <p class="small text-muted">登录后可能获得访问权限</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-question-circle fa-3x text-info mb-3"></i>
                            <h6 class="card-title">联系管理员</h6>
                            <p class="small text-muted">如需访问权限，请联系系统管理员</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-home fa-3x text-primary mb-3"></i>
                            <h6 class="card-title">返回首页</h6>
                            <a href="{{ url_for('profile.dashboard') }}" class="btn btn-sm btn-outline-primary">首页</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        {% if current_user and current_user.is_authenticated %}
        <div class="mt-4">
            <div class="alert alert-info">
                <i class="fas fa-user me-2"></i>
                当前登录用户: <strong>{{ current_user.username }}</strong>
                <br>
                <small class="text-muted">如果这是您的账户但您仍无法访问，可能是权限设置问题。</small>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}